{include file="public/header296"}
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="padding-top: 10px;">
      <div class="layui-form-item">
        <div class="layui-inline">
          <div class="layui-input-inline">
            <input type="text" name="start_date" id="start_date" placeholder="开始日期" autocomplete="off" class="layui-input" />
          </div>
          <div class="layui-input-inline">
            <input type="text" name="end_date" id="end_date" placeholder="截至日期" autocomplete="off" class="layui-input" />
          </div>
          <div class="layui-input-inline">
            <input type="text" name="keywords" placeholder="昵称/手机" autocomplete="off" class="layui-input">
          </div>
          <div class="layui-input-inline">
            <select name="is_vip" id="is_vip">
              <option value="">是否认证</option>
              <option value="1">认证</option>
              <option value="-1">未认证</option>
            </select>
          </div>
          <div class="layui-input-inline">
            <select name="gender" id="gender">
              <option value="">性别</option>
              <option value="1">男</option>
              <option value="2">女</option>
              <option value="0">未知</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <button class="layui-btn layuiadmin-btn-list" lay-submit
                  lay-filter="LAY-app-contlist-search">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="layui-card-body">
      <form class="layui-form" lay-filter="layui-app-form" id="layui-app-form" style="display:none">
        <div class="layui-form-item" style="margin-top: 20px">
          <div class="layui-inline">
            <label class="layui-form-label">银行名称</label>
            <div class="layui-input-inline">
              <input type="text" name="bank_name" id="bank_name" lay-verify="required" class="layui-input"/>
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">银行账号</label>
            <div class="layui-input-inline">
              <input type="text" name="bank_no" id="bank_no" lay-verify="required" class="layui-input"/>
            </div>
          </div>
        </div>
      </form>
      <table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
      <script type="text/html" id="table-content-list">
        <a class="layui-btn layui-btn-xs" lay-event="bank"><i class="layui-icon"></i>银行卡</a>
        <a class="layui-btn layui-btn-xs layui-btn-normal " lay-event="edit"><i class="layui-icon"></i>查看</a>
      </script>
    </div>
  </div>
</div>
<style>
  .layui-table .layui-table-cell{
    height: auto;
    line-height: 44px;
    max-width: 100%;
  }
</style>
<script>
  layui.use(['layer', 'table', 'laydate'], function () {
    var $ = layui.$
            , table = layui.table
            , laydate = layui.laydate
            , form = layui.form;
    laydate.render({
      elem: '#start_date'
      , trigger:'click'
    });
    laydate.render({
      elem: '#end_date'
      , trigger:'click'
    });
    table.render({
      elem: '#LAY-app-content-list'
      , url: "{:url('user/getUserList')}"
      , request: {
        pageName: 'page',
        limitName: 'page_size'
      }
      , page: {
        layout: ['limit', 'count', 'prev', 'page', 'next']
        , first: '首页'
        , last: '尾页'
        , limit: 10
      }
      , toolbar:true
      , totalRow: true
      , cellMinWidth: 120
      , cols: [[
          {field: 'id', type: 'checkbox', fixed: 'left', title: '全选'}
        , {field: 'nickname', title: '昵称', align: 'center'}
        , {field: 'avatar', title: "头像", width: 45, align:'center', templet: function (d) {
          if (d.avatar != '') {
            str = '<div id="layer-photos-cover-'+ d.id +'" class="layer-photos-demo">';
            str +='<img layer-src="'+ d.avatar +'" width="40" height="40" src="' + d.avatar + '">';
            return str;
          } else{
            return '';
          }
        }}
        , {field: 'mobile', title: '手机', align: 'center'}
        , {field: 'gender', title: '性别', align:"center", width:80, templet: function (d) {
            if (d.gender == 1) {
              return '男';
            } else if(d.gender == 2){
              return '女';
            } else {
              return '未知';
            }
        }}
        , {field: 'create_time', title: '注册时间', width: 180, sort: true}
        , {field: 'status', title: "用户状态", minWidth: 80,  align:'center', templet: function (d) {
            if (d.status == 1) {
              return '<input type="checkbox" name="status" value="'+ d.id +'" lay-skin="switch" lay-text="正常|封禁" lay-filter="status" checked>'
            } else if(d.status == 0) {
              return '<input type="checkbox" name="status" value="'+ d.id +'" lay-skin="switch" lay-text="正常|封禁" lay-filter="status">'
            }
          }}
        , {field: 'is_vip', title: '是否认证', align:'center', width:90, templet: function (d) {
            if (d.is_vip == 1) {
              return '是';
            } else {
              return '否';
            }
          }}
        , {field: 'expire_time', title: '过期时间', align: 'center'}
        , {title: '操作', align: 'center',width:120, fixed: 'right', toolbar: '#table-content-list'}
      ]]
      , text: {
        none: '暂无相关数据'
      }
      , done: function () {
        hoverOpenImage();
      },
    });
    // 监听工具条
    table.on('tool(LAY-app-content-list)', function (obj) {
      var data = obj.data;
      if (obj.event === 'edit') {
        layer.open({
          type: 2
          , title: '查看用户'
          , content: "{:url('user/edit')}?id=" + data.id
          , maxmin: true
          , area: ['85%', '85%']
          ,btn: ['提交', '取消']
          , yes: function (index, layero) {
            var iframeWindow = window['layui-layer-iframe'+ index]
                    ,submit = layero.find('iframe').contents().find("#Lay-app-form-edit");

            iframeWindow.layui.form.on('submit(Lay-app-form-edit)', function(data){
              var field = data.field;
              $.ajax({
                url:"{:url('user/edit')}",
                type:'post',
                data:{'field':field},
                success:function(res){
                  if(res.code == 0){
                    layer.msg(res.msg,{icon:1});
                    table.reload('LAY-app-content-list');
                  } else if (res.code == 1){
                    layer.msg(res.msg,{icon:5});
                  }
                }
              });
            });
            submit.trigger('click');
          }
        });
      } else if(obj.event == 'bank'){
        $("#bank_name").val(data.bank_name);
        $("#bank_no").val(data.bank_no);
        form.render();
        layer.open({
          type:1,
          skin: 'demo-class',
          area:['600px','400px'],
          title: '添加用户银行卡',
          content: $("#layui-app-form"),
          shade: 0,
          btn: ['确定', '取消'],
          yes: function(){
            var bank_name = $('#bank_name').val();
            var bank_no = $('#bank_no').val();
            if (bank_name == ''){
              return layer.msg('银行名称不能为空', {icon: 5});
            }
            if (bank_no == ''){
              return layer.msg('银行卡号名称不能为空', {icon: 5});
            }
            $.post("{:url('user/bank')}", {user_id:data.id, bank_name:bank_name, bank_no:bank_no}, function (res) {
              if (res.code == 0) {
                layer.msg(res.msg, {icon: 1});
                table.reload('LAY-app-content-type2-list');
                $("#layui-app-form")[0].reset();
                layer.closeAll();
              } else {
                layer.msg(res.msg, {icon: 5});
              }
            });
          },
          btn2: function(){
            $("#layui-app-form")[0].reset();
            layer.closeAll();
          },
          cancel: function(){
            $("#layui-app-form")[0].reset();
            layer.closeAll();
          }
        });
      }
    });

    form.on('submit(LAY-app-contlist-search)', function (data) {
      var field = data.field;
      table.reload('LAY-app-content-list', {
        page: {
          curr: 1
        }
        , where: field
      });
    });
    // 监听开关操作
    form.on('switch(status)', function(obj){
      if (obj.elem.checked == true){
        status = 1;
      } else if(obj.elem.checked == false){
        status = 0;
      }
      var id = this.value;
      $.post("{:url('user/updateStatus')}", {id:id, status:status}, function (res) {
        if (res.code == 0) {
          layer.msg(res.msg, {icon: 1, time: 1500});
        } else {
          layer.msg(res.msg, {icon: 5, time: 2000});
        }
      });
    });

    function hoverOpenImage(){
      var img_show = null;
      $('td img').hover(function(){
        var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:275px;' />";
        img_show = layer.tips(img, this,{
          tips:[1, '#000']
          , area: ['300px', '290px']
          , maxWidth: 300
        });
      },function(){
        layer.close(img_show);
      });
    }

    var $ = layui.$, active = {
      insert: function(){
        layer.open({
          type: 2
          ,title: '添加管理员'
          ,content: "{:url('user/insert')}"
          ,maxmin: true
          ,area: ['800px', '600px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var iframeWindow = window['layui-layer-iframe'+ index]
                    ,submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");

            iframeWindow.layui.form.on('submit(layuiadmin-app-form-submit)', function(data){
              var field = data.field;
              $.ajax({
                url:"{:url('user/insert')}",
                type:'post',
                data:{'field':field},
                success:function(res){
                  if(res.code == 0){
                    layer.msg(res.msg,{icon:1});
                    table.reload('LAY-app-content-list');
                  } else{
                    layer.msg(res.msg,{icon:5});
                    return false;
                  }
                }
              });
              layer.close(index);
            });
            submit.trigger('click');
          }
        });
      }
    };

    $('.layui-btn.layuiadmin-btn-list').on('click', function () {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
</script>
{include file="public/footer" /}
